<template>
	<view class="new-cheating-container" :style="[{paddingTop: CustomBar+'px'}]">
		<cu-custom :isBack="isBack" :isHome="isHome" fatherCss="background: rgba(0,0,0,0);box-shadow:none">
			<block slot="backText"></block>
			<block slot="content">
				<text style="font-size: 36rpx;color: #ffd34e;text-shadow: 3rpx 4rpx 4rpx #da870a;letter-spacing: 2rpx;">点赞赢免单</text>
			</block>
		</cu-custom>
		<view class="show-container" v-if="bigShow">
			<image :style="[{width:mountainWidth+'px'},{height:mountainHeight+'px'}]" :src="'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/mountain.png?x-oss-process=image/resize,m_fill,h_'+mountainHeight+',w_'+mountainWidth"
			 mode="" class="mountain"></image>
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/tree.png?x-oss-process=image/resize,m_fill,h_300,w_750"
			 mode="" class="forest"></image>
			<view class="cable-axis" :style="[{bottom: mountainHeight+'px'},{width: mountainWidth+'px'}]"></view>
			<view class="cable-vertical" :style="[{height: mountainHeight+'px'},{left: mountainWidth-10+'px'}]">
				<view class="car-content" id="cable-scope">
					<!-- 缆车 -->
					<view class="user-cable-car" :style="[{width: windowWidth-mountainWidth+'px'},{top: userTop+'px'}]">
						<view class="user-cable-car-cont">
							<image class="car" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/cable-car.png?x-oss-process=image/resize,m_fill,h_90,w_50"
							 mode=""></image>
							<view class="info">
								<view class="">
									<image :src="helpInfo.headimg+'?x-oss-process=image/resize,m_fill,h_36,w_36'" mode=""></image>
									<text>{{isFlag?'您':'好友'}}当前处在第{{userNum}}名</text>
								</view>
								<view class="tips">
									订单金额：{{helpInfo.order_amount}}元
								</view>
								<view class="tips" v-if="userNum<10">
									本次{{helpInfo.flag==1?'已得':'预计可得'}}<text>{{helpInfo.now_money}}元</text>
								</view>
								<view class="tips">
									<view class="" v-if="userNum>10 && zoomStreetNum>10">
										进前十最低拿<text>{{helpInfo.ten_money}}元</text>
									</view>
									<view class="" v-if="userNum<10 && userNum!=1">
										您离第{{userNum-1}}还差<text>{{helpInfo.pre_number}}</text>米
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 分享者和被分享者操作按钮 -->
			<view class="active-btn" v-if="!isFlag">
				<form @submit='helpAddNums' report-submit>
					<button formType='submit'>帮TA点赞赢免单</button>
				</form>
			</view>
			<view class="active-btn" @click="showModal" v-if="isFlag">
				点赞赢免单
			</view>
			<!-- 商铺信息 -->
			<view class="shops-info"  @click="goShop">
				<image :src="helpInfo.shop_image+'?x-oss-process=image/resize,m_fill,h_100,w_100'" mode=""></image>
				<view class="">
					<text>{{helpInfo.b_name}}</text>
					<text class="text-cut">{{helpInfo.b_address}}</text>
				</view>
			</view>
			<!-- 瓜分资金池数量 -->
			<view class="shop-money" :style="[{bottom: mountainHeight-19+'px'}]">
				<view class="shop-money-content">
					<view class="">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/money1.png?x-oss-process=image/resize,m_fill,h_87,w_76"
						 mode=""></image>
					</view>
					<view class="">
						目标金额{{helpInfo.order_amount}}元
					</view>
				</view>
			</view>
			<!-- 高度 -->
			<view class="user-height" :style="[{bottom: mountainHeight+34+'px'}]">
				<view class="user-height-content">
					<view class="">
						高度
					</view>
					<view class="">
						<count-up :num="nums" color="#894c12" width='9' height='22' fontSize='14'></count-up>
						<view class="">
							米
						</view>
					</view>
				</view>
			</view>
			<!-- 左边*** -->
			<view class="left-cont">
				<view class="right-item" @click="showRuleNew">
					<view class="">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/activity-rules.png?x-oss-process=image/resize,m_fill,h_84,w_71"
						 mode=""></image>
					</view>
					<view class="">
						规则
					</view>
				</view>
				<view class="right-item" @click="showRankingShowNew">
					<view class="">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/list.png?x-oss-process=image/resize,m_fill,h_81,w_79"
						 mode=""></image>
					</view>
					<view class="">
						排行榜
					</view>
				</view>
				<view class="right-item" @click="showDevoteShowNew">
					<view class="">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/rockets.png?x-oss-process=image/resize,m_fill,h_83,w_64"
						 mode=""></image>
					</view>
					<view class="">
						贡献榜
					</view>
				</view>
			</view>
			<!-- 右边规则类等 -->
			<view class="right-cont">
				<view class="right-item" @click="goShop">
					<view class="">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/back-to-the-store.png?x-oss-process=image/resize,m_fill,h_84,w_73"
						 mode=""></image>
					</view>
					<view class="">
						店铺
					</view>
				</view>
				<view class="right-item" @click="showClickMall">
					<view class="">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/distribution-centre.png?x-oss-process=image/resize,m_fill,h_84,w_79"
						 mode=""></image>
					</view>
					<view class="">
						去赚钱
					</view>
				</view>
				<view class="right-item" @click="showClickPerson">
					<view class="">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/ambassadors-man.png?x-oss-process=image/resize,m_fill,h_73,w_80"
						 mode=""></image>
					</view>
					<view class="">
						推广大使
					</view>
				</view>
				<view class="right-item" @click="showClickNew" v-if="isFlag">
					<view class="">
						<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/lottery.png?x-oss-process=image/resize,m_fill,h_81,w_80"
						 mode=""></image>
					</view>
					<view class="">
						开奖
					</view>
				</view>
				
			</view>
			<!-- 背景  鸟 -->
			<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/bird.png?x-oss-process=image/resize,m_fill,h_71,w_155"
			 class="bird-bg" mode=""></image>

			<!-- 弹窗类 -->
			<!-- 规则 -->
			<view class="bg-black-layer" v-if="ruleShow" :style="[{height: windowHeight+'px'}]">
				<view class="content" :animation="ruleAnimation">
					<view class="content-radius"></view>
					<view class="content-radius-zd"></view>
					<view class="context">
						<view class="context-content">
							<image class="close" v-if="ruleData.flag" @click="hideRuleNew" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/close.png?x-oss-process=image/resize,m_fill,h_60,w_60"
							 mode=""></image>
							<view class="context-content-radius">
								<image class="rule-image" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/activity-rules1.png?x-oss-process=image/resize,m_fill,h_64,w_50"
								 mode=""></image>
							</view>
							<view class="info-text">
								<view class="info-text-title">
									活动规则
								</view>
								<view class="rule-info-text" :style="ruleData.flag?'':'padding-bottom: 150rpx;'">
									<view class="blue-p" v-for="(tips,index) in ruleData.rule" :key="index">
										{{tips}}
									</view>
									<view class="beizhu-p">
										<text>注：</text>{{ruleData.tips}}
									</view>
									<view class="beizhu-p">
										{{ruleData.footer}}
									</view>
									<view class="need-input" v-if="!ruleData.flag">
										<view class="" @click="changeFalg">
											<view class="">
												<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/blue-checked1.png?x-oss-process=image/resize,m_fill,h_30,w_30"
												 v-if="ruleData.isFlag"></image>
											</view>
											<text>我已阅读并同意此协议</text>
										</view>
										<view class="" @click="agree">
											确认参与
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 好友贡献 -->
			<view class="bg-black-layer" v-if="devoteShow" :style="[{height: windowHeight+'px'}]">
				<view class="content" :animation="devoteAnimation">
					<view class="content-radius"></view>
					<view class="content-radius-zd"></view>
					<view class="context">
						<view class="context-content">
							<image class="close" @click="hideDevoteNew" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/close.png?x-oss-process=image/resize,m_fill,h_60,w_60"
							 mode=""></image>
							<view class="context-content-radius">
								<image class="devote-image" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/rockets2.png?x-oss-process=image/resize,m_fill,h_64,w_64"
								 mode=""></image>
							</view>
							<view class="info-text">
								<view class="info-text-title">
									好友贡献榜
								</view>
								<view class="rule-info-text">
									<scroll-view scroll-y="true" style="height: 360px" @scrolltolower="getDevoteList" v-if="devoteList.length>0">
										<view class="scroll-devote-item">
											<view class="devote-item" v-for="(item,index) in devoteList" :key="index">
												<image :src="item.headimg+'?x-oss-process=image/resize,m_fill,h_64,w_64'" mode=""></image>
												<view class="">
													<view class="">
														<text class="text-cut">{{item.user_name}}</text>
														<text>{{item.create_time}}</text>
													</view>
													<view class="">
														+{{item.number}}米
													</view>
													<view class="" v-if="isFlag" @click="show" :data-id="item.user_id" :data-form="item.form_id">
														感谢TA
													</view>
												</view>
											</view>
										</view>
									</scroll-view>
									<no-content :showType="'data'" :tips="'暂时没有人帮你助力，快去分享吧~'" v-if="devoteList.length==0"></no-content>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 排行榜 -->
			<view class="bg-black-layer" v-if="rankingShow" :style="[{height: windowHeight+'px'}]">
				<view class="content" :animation="rankingAnimation">
					<view class="content-radius"></view>
					<view class="content-radius-zd"></view>
					<view class="context">
						<view class="context-content">
							<image class="close" @click="hideRankingNew" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/close.png?x-oss-process=image/resize,m_fill,h_60,w_60"
							 mode=""></image>
							<view class="context-content-radius">
								<image class="devote-image" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/list1.png?x-oss-process=image/resize,m_fill,h_64,w_64"
								 mode=""></image>
							</view>
							<view class="info-text">
								<view class="info-text-title">
									排行榜
								</view>
								<view class="rule-info-text" style="padding-top: 140rpx;">
									<image class="sj-left" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/triangle.png?x-oss-process=image/resize,m_fill,h_64,w_64"
									 mode=""></image>
									<image class="sj-right" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/triangle.png?x-oss-process=image/resize,m_fill,h_64,w_64"
									 mode=""></image>
									<view class="me-rank">
										<view class="">
											<text>{{helpInfo.sequence}}</text>
											<text>{{isFlag?'我的':'好友'}}排名</text>
										</view>
										<view class="">
											<image :src="helpInfo.headimg+'?x-oss-process=image/resize,m_fill,h_64,w_64'" mode=""></image>
											<view class="">
												<text class="text-cut">{{helpInfo.user_name}}</text>
												<text v-if="helpInfo.now_money">{{helpInfo.flag==1?'已得':'预计可得'}}{{helpInfo.now_money}}元大红包</text>
											</view>
										</view>
										<view class="">
											{{helpInfo.number}}米
										</view>
									</view>
									<scroll-view scroll-y="true" style="height: 530rpx;padding-top: 10rpx;" @scrolltolower="getRankList">
										<view class="rank-item" v-for="(item,index) in rankList" :key="index">
											<view :class="index<10?'ten-before':'ten-after'">
												<image :src="item.headimg+'?x-oss-process=image/resize,m_fill,h_64,w_64'" mode=""></image>
												<image :src="index<10?'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/no.'+(index+1)+'.1.png?x-oss-process=image/resize,m_fill,h_64,w_64':'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/no.11.png?x-oss-process=image/resize,m_fill,h_49,w_73'"
												 mode=""></image>
												<text>{{index+1}}</text>
											</view>
											<view class="">
												<view class="">
													<view class="text-cut">{{item.user_name}}1</view>
													<view v-if="item.money>0 && item.free_flag==0">{{helpInfo.flag==1?'已得':'预计可得'}}<text>{{index==9 || item.user_id==userInfo.id ?item.money+'元':'***'}}</text>大红包</view>
													<view v-if="item.free_flag==1">{{helpInfo.flag==1?'已免单':'预计可免单'}}</view>
												</view>
												<view class="">
													{{item.number}}米
												</view>
											</view>
										</view>
									</scroll-view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 领奖 -->
			<view class="bg-black-layer" v-if="clickSucShow" :style="[{height: windowHeight+'px'}]">
				<view class="content" :animation="clickSucAnimation" style="height: 410rpx;opacity: 1;">
					<view class="content-radius"></view>
					<view class="content-radius-zd"></view>
					<view class="context" style="height: 390rpx;">
						<view class="context-content">
							<image class="close" @click="hideClickNew" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/close.png?x-oss-process=image/resize,m_fill,h_60,w_60"
							 mode=""></image>
							<view class="context-content-radius">
								<image class="devote-image" src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/lottery1.png?x-oss-process=image/resize,m_fill,h_64,w_64"
								 mode=""></image>
							</view>
							<view class="info-text">
								<view class="info-text-title">
									开奖啦！
								</view>
								<view class="rule-info-text click-suc-info">
									<view class="">恭喜您获得</view>
									<view class="">
										{{sendMoney}}元
									</view>
									<view class="" @click="hideClickNew">
										我知道了
									</view>
									<view class="">
										奖金已发放至您的账户余额，<text @click="goDraw">前往提现>>></text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 点赞成功 -->
			<view class="bg-black-layer" v-if="drawShow" :style="[{height: windowHeight+'px'}]">
				<view class="draw-content" :animation="drawAnimation">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/friends-to-accelerate1.png?x-oss-process=image/resize,m_fill,h_265,w_350"
					 mode=""></image>
					<view class="">
						帮好友点赞成功
					</view>
					<view class="">
						+{{nowHelpData.number}}米
					</view>
					<view class="">
						<text @click="hideDrawNew">我知道了</text>
						<text @click="showClickMall">去赚钱</text>
					</view>
				</view>
			</view>
		</view>
		<tui-modal :show="modalShow" @click="handleClick" @cancel="hide" content="请选择分享方式" :button="button"></tui-modal>
		<!-- 商品分享海报 -->
		<canvas canvas-id="shareCanvas" style="width: 600px;height: 762px"></canvas>
		<view class="goods-share-cont" v-if="isShare" @click="hideShareG">
			<image :src="shareImg" class="share-img"></image>
			<view class="save-btn-g" @tap.stop="saveImage" v-if="isShare">
				保存海报
			</view>
		</view>
		<!-- send -->
		<tui-modal :show="showConversion" @cancel="hideSend" :fatherStyle="'padding: 20rpx 0 0;border-radius: 14rpx;width: 79%;'"
		 :custom="true" :maskClosable="false">
			<view class="tui-modal-custom  z_d_y">
				<view class="title">
					赠送好友积分
				</view>
				<input type="number" v-model="scoreNum" placeholder="输入赠送好友积分数" placeholder-class="place-holder" />
				<view class="btn">
					<text @click="hideSend">取消</text>
					<text @click="submit">确认</text>
				</view>
			</view>
		</tui-modal>
	</view>
</template>

<script>
	import countUp from './component/countUp.vue'
	import noContent from './component/noContent.vue'
	import tuiModal from "@/components/thorUI/modal.vue"
	import {
		formatDateTime
	} from '@/utils/util.js'
	import {
		promisify
	} from '@/utils/promise.util'
	export default {
		components: {
			countUp,
			tuiModal,
			noContent
		},
		data() {
			return {
				isHome: false,
				isBack: false,
				userInfo: {},
				helpInfo: {},
				CustomBar: this.CustomBar,
				windowHeight: 0,
				windowWidth: 0,
				mountainHeight: 0,
				mountainWidth: 0,
				orderId: '',
				bigShow: false,
				// 用户米数
				nums: 512342,
				// 用户高度
				userTop: 0,
				userNum: 50,
				// 总高度
				zoomHeightScope: 0,
				// 总排名个数
				zoomStreetNum: 100,
				// 弹窗类
				// 规则
				ruleData: {},
				ruleShow: false,
				ruleAnimation: {},
				// 好友贡献
				devoteShow: false,
				devoteAnimation: {},
				devotePage: 1,
				devoteList: [],
				devoteLastPage: '',
				// 排行榜
				rankingShow: false,
				rankingAnimation: {},
				rankList: [],
				rankPage: 1,
				rankLastPage: '',
				// 领取成功
				clickSucShow: false,
				clickSucAnimation: {},
				// 点赞
				drawShow: false,
				drawAnimation: {},
				nowHelpData: {},
				// 分享
				modalShow: false,
				button: [{
					text: "分享好友",
					type: 'green',
					plain: true,
					openType: true
				}, {
					text: "生成海报",
					plain: true
				}],
				isFlag: false,
				// 海报
				isShare: false,
				shareImg: '',
				c_bg: '',
				c_qr: '',
				sendMoney: '',
				// 赠送积分
				showConversion: false,
				scoreNum: '',
				helpUser: '',
				formId: ''
			}
		},
		onLoad(options) {
			// options.orderId = "2972"
			if (options.scene) {
				this.orderId = options.scene
			} else {
				this.orderId = options.orderId
			}
			if (!uni.getStorageSync('auth_token')) {
				let curUrl = `/${this.curUrlWithArgs()}`
				var urlWithArgs = curUrl + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				curUrl = encodeURIComponent(urlWithArgs)
				uni.redirectTo({
					url: `/pages/login?next=${curUrl}`,
				})
				return
			}

			// 判断显示返回首页还是上一步
			var length = getCurrentPages().length
			if (length == 1) {
				this.isHome = true
			} else {
				this.isBack = true
			}
			this.userInfo = uni.getStorageSync('userInfo')
			this.getRule()
			// 详情
			this.getHelpLog()
		},
		onPullDownRefresh() {
			this.getHelpLog()
			this.devoteList = []
			this.devoteLastPage = ''
			this.devotePage = 1
			this.rankList = []
			this.rankPage = 1
			this.rankLastPage = ''
			setTimeout(function() {
				uni.showToast({
					title: '刷新成功'
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			// 显示弹窗
			show(e) {
				var that = this
				var id = e.currentTarget.dataset.id
				var formId = e.currentTarget.dataset.form
				if (id == that.userInfo.m_id) {
					uni.showToast({
						title: '不能给自己赠送',
						icon: 'none'
					})
					return
				}
				that.helpUser = id
				that.formId = formId
				this.showConversion = true
			},
			// 取消
			hideSend() {
				this.showConversion = false
			},
			// 提交数据
			submit() {
				var that = this
				var scoreNum = that.scoreNum
				if (scoreNum == '') {
					uni.showToast({
						title: '请输入积分数量',
						icon: 'none'
					})
					return false
				} else if (scoreNum.indexOf('.') > -1) {
					uni.showToast({
						title: '请填写正确数量',
						icon: 'none'
					})
					return false
				}

				if (that.helpUser == '') {
					uni.showToast({
						title: '未锁定目标好友',
						icon: 'none'
					})
					return false
				}
				this.$request({
					url: '/User/give_friend_jifen',
					data: {
						help_user: that.helpUser,
						jifen: scoreNum,
						form_id: that.formId,
						business_id: that.helpInfo.business_id
					},
					success: res => {
						if (res.data.status == 1) {
							uni.hideLoading()
							uni.showModal({
								content: '赠送成功',
								showCancel: false
							})
							that.scoreNum = ''
							that.showConversion = false
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			saveImage: function(e) {
				var that = this;
				uni.showLoading({
					title: '保存中',
				})
				uni.saveImageToPhotosAlbum({
					filePath: that.shareImg,
					success: function(res) {
						uni.hideLoading()
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 3000
						})
					},
					fail: function(res) {
						uni.showToast({
							title: '保存失败',
							icon: 'error',
							duration: 300
						})
					}
				})
			},
			hideShareG() {
				this.isShare = false
			},
			darwCanvas() {
				var that = this;
				if (that.shareImg) {
					that.isShare = true
					return
				}
				// 生成海报
				uni.showLoading({
					title: '资源整合中',
				})
				const uNiDownloadFile = promisify(uni.getImageInfo)
				Promise.all([
					uNiDownloadFile({
						src: 'https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/assistance-bg.png?x-oss-process=image/resize,m_fill,h_542,w_600'
					}),
					uNiDownloadFile({
						src: that.helpInfo.help_qr + '?x-oss-process=image/resize,m_fill,h_160,w_160'
					})
				]).then(res => {
					that.c_bg = res[0].path
					that.c_qr = res[1].path
					uni.hideLoading()
					that.draw()
				}).catch(function(err) {
					uni.hideLoading()
					uni.showToast({
						title: '生成海报失败',
						icon: 'none'
					});
				})
			},
			//绘制
			draw() {
				var that = this;
				uni.showLoading({
					title: '生成海报中',
				})
				const ctx = uni.createCanvasContext('shareCanvas', that);
				// 渲染背景
				const grd = ctx.createLinearGradient(0, 0, 750, 1076);
				grd.addColorStop(0, '#ffffff');
				grd.addColorStop(1, '#ffffff');
				ctx.setFillStyle(grd); //将渐变色渲染入正方形
				ctx.fillRect(0, 0, 600, 762); //起点坐标为（20，20），长宽都为120px的正方形
				ctx.drawImage(that.c_bg, 0, 0, 600, 542) // 推进去图片
				ctx.font = "normal normal 30px 微软雅黑";
				ctx.setFillStyle('#333333');
				ctx.fillText('好友点赞', 21, 612);
				ctx.font = "normal normal 24px 微软雅黑";
				ctx.setFillStyle('#666666');
				ctx.fillText('邀请好友点赞，瓜分奖金赢免单。', 21, 664);
				ctx.drawImage(that.c_qr, 420, 572, 160, 160) // 推进去图片
				ctx.draw(true, () => {
					setTimeout(function() {
						uni.canvasToTempFilePath({
							canvasId: 'shareCanvas',
							success: function(res) {
								that.shareImg = res.tempFilePath
								that.isShare = true
								uni.hideLoading()
							},
							fail(e) {
								uni.hideLoading()
								uni.showToast({
									title: '生成海报失败',
									icon: 'none'
								});
							}
						}, that)
					}, 100)
				})
			},
			showModal() {
				this.modalShow = true
			},
			hide() {
				this.modalShow = false
			},
			handleClick(e) {
				let index = e.index;
				if (index == 1) {
					// 生成海报
					console.log('生成海报')
					this.darwCanvas()
				}
				this.hide()
			},
			/*获取当前页带参数的url*/
			curUrlWithArgs() {
				var pages = getCurrentPages()
				var currentPage = pages[pages.length - 1]
				var url = currentPage.route
				var options = currentPage.options
				var urlWithArgs = url + '?'
				for (var key in options) {
					var value = options[key]
					urlWithArgs += key + '=' + value + '&'
				}
				urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
				return urlWithArgs
			},
			goShop() {
				uni.redirectTo({
					url: '/pages/generalDetail?busId=' + this.helpInfo.business_id
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/tabBar/home'
				})
			},
			goDraw() {
				uni.redirectTo({
					url: '/pages/withdrawalrd'
				})
			},
			// 弹窗类
			// 点赞
			showDrawNew() {
				var that = this
				that.drawShow = true
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animation.scale(1.1).step()
				setTimeout(function() {
					animation.scale(1).step()
					that.drawAnimation = animation.export()
				}.bind(that), 300)
			},
			hideDrawNew() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				setTimeout(function() {
					animation.scale(1).step()
					that.drawAnimation = animation.export()
					that.drawShow = false
					// 助力成功加参数
					that.nums += that.nowHelpData.number
					that.userTop -= 1
					if (that.userTop < 0) {
						that.userTop = 0
					}
				}.bind(that), 300)
			},
			showClickMall(){
				uni.navigateTo({
					url: `/pages/distributionCentre?busId=${this.helpInfo.business_id}`
				})
			},
			// 去个人中心
			showClickPerson(){
				uni.switchTab({
					url:'/pages/tabBar/person'
				})
			},
			// 领取红包
			showClickNew() {
				var that = this
				this.$request({
					url: '/HelpActivity/open_packet',
					method: 'POST',
					data: {
						id: that.helpInfo.id,
						order_id: that.orderId
					},
					success: res => {
						if (res.data.status == 1) {
							if (res.data.data.flag == 1) {
								that.clickSucShow = true
								var animation = uni.createAnimation({
									duration: 500,
									timingFunction: 'ease',
								})
								animation.scale(1.1).step()
								setTimeout(function() {
									animation.scale(1).step()
									that.sendMoney = res.data.data.money
									that.clickSucAnimation = animation.export()
								}.bind(that), 300)
							} else {
								var showText = '当前活动于' + res.data.data.take_end_time + '定时发放，到期可在此处查看分配金额，冲刺吧，勇攀高峰！'
								uni.showModal({
									title: '抱歉',
									content: showText,
									showCancel: false,
									confirmText: '去分享',
									success() {
										that.showModal()
									}
								})
							}
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			hideClickNew() {
				var that = this
				// var animation = uni.createAnimation({
				// 	duration: 500,
				// 	timingFunction: 'ease',
				// })
				// animation.opacity(0).step()
				// this.clickSucAnimation = animation.export()
				// setTimeout(function() {
				// 	that.clickSucShow = false
				// }.bind(this), 300)

				// var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				setTimeout(function() {
					animation.scale(1).step()
					that.clickSucAnimation = animation.export()
					that.clickSucShow = false
				}.bind(that), 300)
			},
			// 规则
			showRuleNew() {
				var that = this
				that.ruleShow = true
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				setTimeout(function() {
					animation.opacity(1).step()
					this.ruleAnimation = animation.export()
				}.bind(this), 300)
			},
			hideRuleNew() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})

				animation.opacity(0).step()
				this.ruleAnimation = animation.export()
				setTimeout(function() {
					that.ruleShow = false
				}.bind(this), 300)
			},
			getDevoteList() {
				var that = this;
				if (that.devotePage > that.devoteLastPage) {
					uni.showToast({
						title: '没有更多了~'
					})
					return
				}
				this.$request({
					url: '/HelpActivityLog/get_help_log',
					method: 'GET',
					data: {
						a_id: that.helpInfo.id,
						page: that.devotePage,
						order_id: that.orderId
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.data
							that.devoteList = that.devoteList.concat(list)
							that.devotePage++
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 贡献
			showDevoteShowNew() {
				var that = this
				if (that.devoteList.length == 0) {
					that.devotePage = 1
					that.devoteLastPage = ''
				} else {
					that.devoteShow = true
					var animation = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease',
					})
					setTimeout(function() {
						animation.opacity(1).step()
						that.devoteAnimation = animation.export()
					}.bind(that), 300)
					return
				}
				this.$request({
					url: '/HelpActivityLog/get_help_log',
					method: 'GET',
					data: {
						a_id: that.helpInfo.id,
						page: that.devotePage,
						order_id: that.orderId
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.data
							if(list.length>0){
								list = list.splice(0,list.length-1)
							}
							that.devoteList = that.devoteList.concat(list)
							that.devotePage++
							that.devoteLastPage = res.data.data.pageCount

							that.devoteShow = true
							var animation = uni.createAnimation({
								duration: 500,
								timingFunction: 'ease',
							})
							setTimeout(function() {
								animation.opacity(1).step()
								that.devoteAnimation = animation.export()
							}.bind(that), 300)

							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			hideDevoteNew() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animation.opacity(0).step()
				this.devoteAnimation = animation.export()
				setTimeout(function() {
					that.devoteShow = false
				}.bind(this), 300)
			},
			getRankList() {
				var that = this;
				if (that.rankPage > that.rankLastPage) {
					uni.showToast({
						title: '没有更多了~'
					})
					return
				}
				this.$request({
					url: '/HelpActivityLog/get_activity_log',
					method: 'GET',
					data: {
						a_id: that.helpInfo.id,
						page: that.rankPage
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.data
							that.rankList = that.rankList.concat(list)
							that.rankPage++
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 排行榜
			showRankingShowNew() {
				var that = this
				// 假如目标数组没有值，重置页数重新请求一下。
				if (that.rankList.length == 0) {
					that.rankPage = 1
					that.rankLastPage = ''
				} else {
					that.rankingShow = true
					var animation = uni.createAnimation({
						duration: 500,
						timingFunction: 'ease',
					})
					setTimeout(function() {
						animation.opacity(1).step()
						that.rankingAnimation = animation.export()
					}.bind(that), 300)
					return
				}
				this.$request({
					url: '/HelpActivityLog/get_activity_log',
					method: 'GET',
					data: {
						a_id: that.helpInfo.id,
						page: that.rankPage
					},
					success: res => {
						if (res.data.status == 1) {
							var list = res.data.data.data
							that.rankList = that.rankList.concat(list)
							that.rankPage++
							that.rankLastPage = res.data.data.pageCount

							that.rankingShow = true
							var animation = uni.createAnimation({
								duration: 500,
								timingFunction: 'ease',
							})
							setTimeout(function() {
								animation.opacity(1).step()
								that.rankingAnimation = animation.export()
							}.bind(that), 300)
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});


			},
			hideRankingNew() {
				var that = this
				var animation = uni.createAnimation({
					duration: 500,
					timingFunction: 'ease',
				})
				animation.opacity(0).step()
				this.rankingAnimation = animation.export()
				setTimeout(function() {
					that.rankingShow = false
				}.bind(this), 300)
			},
			// 获取规则
			getRule() {
				var that = this;
				this.$request({
					url: '/HelpActivity/get_activity_rule',
					method: 'POST',
					success: res => {
						if (res.data.status == 1) {
							if (!res.data.data.flag) {
								res.data.data['isFlag'] = true
								that.showRuleNew()
							}
							that.ruleData = res.data.data
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			changeFalg() {
				var ruleData = this.ruleData
				ruleData.isFlag = !ruleData.isFlag
				this.ruleData = ruleData
			},
			agree() {
				var that = this;
				var ruleData = this.ruleData
				if (!ruleData.isFlag) {
					uni.showToast({
						title: '请先授权协议',
						icon: 'none'
					})
					return
				}
				this.$request({
					url: '/HelpActivity/agree_agreement',
					method: 'POST',
					success: res => {
						if (res.data.status == 1) {
							ruleData.flag = true
							that.ruleData = ruleData
							that.hideRuleNew()
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			// 获取详情
			getHelpLog() {
				var that = this;
				this.$request({
					url: '/HelpActivity/get_detail',
					data: {
						order_id: that.orderId
					},
					method: 'POST',
					success: res => {
						if (res.data.status == 1) {
							var helpInfo = {}
							helpInfo = res.data.data
							helpInfo.order_amount = parseInt(helpInfo.order_amount)
							that.helpInfo = helpInfo
							that.nums = helpInfo.number
							that.isFlag = helpInfo.is_flag
							that.userNum = helpInfo.sequence
							that.zoomStreetNum = helpInfo.count_num

							// 处理山的高度
							uni.getSystemInfo({
								success: (res) => {
									that.windowHeight = res.windowHeight
									that.mountainHeight = res.windowHeight - that.CustomBar - 64
									// 山体比例
									var scale = 28 / 107
									that.mountainWidth = parseInt(that.mountainHeight * 28 / 107)
									that.windowWidth = res.windowWidth
									that.bigShow = true
									setTimeout(function() {
										let info = uni.createSelectorQuery().select("#cable-scope");
										info.boundingClientRect(function(data) { //data - 各种参数
											that.zoomHeightScope = data.height
											// 计算用户高度（初始化）
											that.conputedUserTop()
										}).exec()
									}, 100)
								}
							})
							// 已开奖直接调取获得金额
							if (helpInfo.flag == 1 && helpInfo.is_flag) {
								that.showClickNew()
							}
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
			conputedUserTop() {
				var that = this
				// top计算公式  放置到
				// 名次/总排名 = 用户top/总高度
				// 用户top = 用户名次*总高度/总排名
				if (that.zoomStreetNum < 10) {
					that.userTop = that.userNum
				} else {
					that.userTop = that.userNum * that.zoomHeightScope / that.zoomStreetNum
				}
			},
			helpAddNums(e) {
				var that = this,
					formId = e.detail.formId
				this.$request({
					url: '/HelpActivityLog/add_activity_log',
					data: {
						a_id: that.helpInfo.id,
						order_id: that.orderId,
						help_user: that.helpInfo.user_id,
						form_id: formId
					},
					method: 'POST',
					success: res => {
						if (res.data.status == 1) {
							// 助力的
							if (that.devoteList.length > 0) {
								//添加记录
								that.devoteList.unshift({
									headimg: that.userInfo.headimg,
									number: res.data.data.number,
									user_name: that.userInfo.user_name,
									create_time: formatDateTime(new Date())
								})
							}
							that.nowHelpData = res.data.data
							that.showDrawNew()
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		},
		onShareAppMessage(res) {
			var that = this
			var titleText = '【'+that.helpInfo.b_name+'】帮TA点赞，助力赢免单'
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: titleText,
				path: '/pages/newCheating?orderId=' + that.orderId,
				imageUrl: "https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/share-new-cheating.png?x-oss-process=image/resize,m_fill,h_300,w_300",
				success: (res) => {
					console.log("转发成功", res);
				},
				fail: (res) => {
					console.log("转发失败", res);
				}
			}
		}
	}
</script>

<style scoped>
	.new-cheating-container {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: repeating-linear-gradient(to bottom, #94c6c6, #ffffff 40%, #f8f8cb 100%);
	}

	.show-container {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.mountain {
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
	}

	.forest {
		width: 100%;
		height: 300rpx;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 2;
	}

	.cable-axis {
		height: 10rpx;
		position: absolute;
		left: 0;
		background-color: #2a3264;
	}

	.cable-vertical {
		width: 4rpx;
		background-color: #2a3264;
		position: absolute;
		bottom: 0;
		padding: 48rpx 0 400rpx 0;
	}
	
	.shops-info{
		width: 360rpx;
		height: 140rpx;
		position: absolute;
		right: 20rpx;
		bottom: 160rpx;
		z-index: 3;
		border-radius: 8rpx;
		padding: 10rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		background: rgba(0,0,0,.5);
		
	}
	
	.shops-info image{
		height: 120rpx;
		width: 120rpx;
		border-radius: 4rpx;
		margin-right: 14rpx;
	}
	
	.shops-info>view{
		flex: 1;
		height: 100rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.shops-info>view>text:nth-child(1){
		letter-spacing: 1rpx;
		font-size: 24rpx;
		color: #fff;
		font-weight: bold;
		max-width: 190rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	
	.shops-info>view>text:nth-child(2){
		letter-spacing: 1rpx;
		font-size: 20rpx;
		color: #fff;
		max-width: 205rpx;
	}

	.active-btn {
		width: 360rpx;
		height: 94rpx;
		position: absolute;
		right: 20rpx;
		bottom: 44rpx;
		z-index: 3;
		border-radius: 45rpx;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/button-new.png?x-oss-process=image/resize,m_fill,h_94,w_262') no-repeat;
		background-size: 360rpx;
		line-height: 94rpx;
		text-align: center;
		letter-spacing: 3rpx;
		font-size: 28rpx;
		color: #333;
	}

	.active-btn button {
		width: 360rpx;
		height: 94rpx;
		padding: 0 !important;
		border-radius: 45rpx;
		background: url('https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/button-new.png?x-oss-process=image/resize,m_fill,h_94,w_262') no-repeat;
		background-size: 360rpx;
		line-height: 94rpx;
		text-align: center;
		letter-spacing: 3rpx;
		font-size: 28rpx;
		color: #333;
	}
	

	.shop-money {
		width: 423rpx;
		height: 96rpx;
		position: absolute;
		left: 50%;
		margin-left: -200rpx;
		z-index: 3;
	}

	.shop-money-content {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.shop-money-content>view:nth-child(1) {
		position: absolute;
		top: -3rpx;
		left: 0;
		background: #faaa20;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 100%;
		width: 96rpx;
		height: 96rpx;
	}

	.shop-money-content>view:nth-child(1) image {
		width: 74rpx;
		height: 87rpx;
		margin-top: 10rpx
	}

	.shop-money-content>view:nth-child(2) {
		text-align: center;
		width: 360rpx;
		height: 72rpx;
		background-image: linear-gradient(0deg, #faaa20 0%, #fae164 100%);
		border-radius: 20rpx;
		line-height: 72rpx;
		text-shadow: 3rpx 4rpx 4rpx #894c12;
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
		text-stroke: 2rpx #f8990b;
	}

	.user-height {
		width: 270rpx;
		height: 60rpx;
		background-image: linear-gradient(0deg, #b2e0ff 0%, #fbc8c0 50%, #fde0b5 100%);
		box-shadow: 1rpx 2rpx 6rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 24rpx;
		border: solid 3rpx #fcefe3;
		position: absolute;
		left: 50%;
		margin-left: -120rpx;
	}

	.user-height-content {
		width: 100%;
		height: 100%;
		padding: 0 20rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: rgb(0, 0, 0, .3) 0px 0px 10rpx inset;
	}

	.user-height-content>view:nth-child(1) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #894c12;
		line-height: 48rpx
	}

	.user-height-content>view:nth-child(2) {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.user-height-content>view:nth-child(2)>view:nth-child(2) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #894c12;
		line-height: 48rpx
	}

	.right-cont {
		width: 96rpx;
		height: 560rpx;
		position: absolute;
		top: 20rpx;
		right: 25rpx;
		display: flex;
		flex-direction: column;
		z-index: 3;
	}

	.left-cont {
		width: 96rpx;
		height: 560rpx;
		position: absolute;
		top: 20rpx;
		left: 25rpx;
		display: flex;
		flex-direction: column;
		z-index: 3;
	}

	.right-cont .right-item:last-child {
		margin-bottom: 0 !important;
	}

	.left-cont .right-item:last-child {
		margin-bottom: 0 !important;
	}

	.right-item {
		width: 96rpx;
		height: 96rpx;
		position: relative;
		background-color: #ffffff;
		border-radius: 48rpx;
		border: solid 3rpx #fcefe3;
		margin-bottom: 20rpx;
	}

	.right-item>view:nth-child(1) {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: flex-end;
		justify-content: flex-end;
		border-radius: 100%;
	}

	.right-cont .right-item:nth-child(1)>view:nth-child(1) image {
		width: 73rpx;
		height: 84rpx;
	}

	.right-cont .right-item:nth-child(2)>view:nth-child(1) image {
		width: 79rpx;
		height: 84rpx;
	}

	.right-cont .right-item:nth-child(3)>view:nth-child(1) image {
		width: 80rpx;
		height: 73rpx;
	}

	.right-cont .right-item:nth-child(4)>view:nth-child(1) image {
		width: 80rpx;
		height: 81rpx;
	}
	
	.left-cont .right-item:nth-child(1)>view:nth-child(1) image {
		width: 71rpx;
		height: 84rpx;
	}

	.left-cont .right-item:nth-child(2)>view:nth-child(1) image {
		width: 79rpx;
		height: 81rpx;
	}

	.left-cont .right-item:nth-child(3)>view:nth-child(1) image {
		width: 64rpx;
		height: 83rpx;
	}

	.right-item>view:nth-child(2) {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 96rpx;
		height: 30rpx;
		background-image: linear-gradient(0deg,
			#99e4ff 0%,
			#ccf2ff 40%,
			#ffffff 100%),
			linear-gradient(#ffffff,
			#ffffff);
		background-blend-mode: normal,
			normal;
		border-style: solid;
		border-width: 1rpx;
		border-image-source: linear-gradient(0deg,
			#65d4fc 0%,
			#ffffff 100%);
		border-radius: 15rpx;
		border-image-slice: 1;
		text-align: center;
		line-height: 30rpx;
		color: #333333;
		font-size: 20rpx;
	}

	.bird-bg {
		position: absolute;
		width: 151rpx;
		height: 71rpx;
		right: 110rpx;
		top: 345rpx;
		z-index: 1;
	}

	.car-content {
		width: 100%;
		height: 100%;
		position: relative;
		/* background: #fff; */
	}

	.user-cable-car {
		/* min-height: 110rpx; */
		/* background: #ccc; */
		position: absolute;
		left: 4rpx;
		transition: all .8s;
		height: auto;
		z-index: 5;
	}

	.user-cable-car-cont {
		width: 100%;
		height: auto;
		position: relative;
	}

	.user-cable-car-cont .car {
		position: absolute;
		top: 0;
		left: 0;
		width: 50rpx;
		height: 90rpx;
	}

	.user-cable-car-cont .info {
		position: absolute;
		top: 45rpx;
		left: 60rpx;
		display: flex;
		flex-direction: column;
	}

	.user-cable-car-cont .info>view:nth-child(1) {
		padding: 0 13rpx 0 0;
		height: 36rpx;
		background-color: #213f67;
		border-radius: 18rpx;
		display: flex;
		align-items: center;
		max-width: 270rpx;
	}

	.user-cable-car-cont .info>view:nth-child(1) image {
		width: 36rpx;
		height: 36rpx;
		border-radius: 18rpx;
		margin-right: 10rpx;
	}

	.user-cable-car-cont .info>view:nth-child(1)>text {
		color: #fff;
		font-size: 20rpx;
	}

	.user-cable-car-cont .info .tips {
		color: #333333;
		font-size: 20rpx;
		padding-left: 46rpx;
	}

	.user-cable-car-cont .info .tips text {
		color: #f34930;
	}


	.bg-black-layer {
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, .6);
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-sizing: borde-box;
		z-index: 1025;
	}

	.bg-black-layer .content {
		width: 600rpx;
		height: 810rpx;
		box-sizing: border-box;
		position: relative;
		background-color: #4b8ce2;
		border-radius: 20rpx;
		opacity: 0;
		box-shadow: 0 0 10rpx #fff inset;

	}

	.bg-black-layer .content .content-radius {
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		top: -50rpx;
		left: 50%;
		transform: translateX(-60rpx);
		background-color: #4b8ce2;
		border-radius: 100%;
		box-shadow: 0 0 10rpx #fff inset;
		z-index: -1;
	}

	.bg-black-layer .content .content-radius-zd {
		width: 110rpx;
		height: 10rpx;
		background-color: #4b8ce2;
		position: absolute;
		top: 0;
		left: 50%;
		transform: translateX(-55rpx);
	}

	.bg-black-layer .content .context {
		width: 580rpx;
		height: 790rpx;
		position: absolute;
		top: 10rpx;
		left: 10rpx;
		border-radius: 20rpx;
		background: #fff;
	}

	.bg-black-layer .content .context .context-content {
		width: 100%;
		height: 100%;
		position: relative;
		padding-top: 50rpx;
		padding: 50rpx 20rpx 20rpx 20rpx;
	}

	.bg-black-layer .content .context .context-content .context-content-radius {
		width: 100rpx;
		height: 100rpx;
		position: absolute;
		top: -50rpx;
		left: 50%;
		transform: translateX(-50rpx);
		background-color: #fff;
		border-radius: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.bg-black-layer .content .context .context-content .close {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		top: -30rpx;
		right: -30rpx;
	}

	.bg-black-layer .content .rule-image {
		width: 50rpx;
		height: 64rpx;
	}

	.bg-black-layer .content .devote-image {
		width: 64rpx;
		height: 64rpx;
	}

	.bg-black-layer .content .context .context-content .info-text {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.bg-black-layer .content .context .context-content .info-text .info-text-title {
		text-align: center;
		font-size: 36rpx;
		color: #285999;
		font-weight: bold;
	}

	.bg-black-layer .content .context .context-content .info-text .rule-info-text {
		flex: 1;
		padding-top: 10rpx;
		/* position: relative; */
		overflow-y: scroll;
	}

	/* 规则 */
	.blue-p {
		font-size: 24rpx;
		color: #285999;
		letter-spacing: 1rpx;
		margin-bottom: 10rpx;
	}

	.beizhu-p {
		font-size: 20rpx;
		color: #666666;
		margin-bottom: 10rpx;
	}

	.beizhu-p text {
		color: #f34930;
	}

	.need-input {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 0 0 20rpx 20rpx;
		padding: 0 24rpx 24rpx;
	}

	.need-input>view:nth-child(1) {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
	}

	.need-input>view:nth-child(1)>view:nth-child(1) {
		width: 24rpx;
		height: 24rpx;
		background-color: #cce2ff;
		box-shadow: inset 0rpx 2rpx 4rpx 0rpx rgba(35, 89, 159, 0.5);
		border-radius: 4rpx;
		margin-right: 15rpx;
		position: relative;
	}

	.need-input>view:nth-child(1)>view:nth-child(1) image {
		width: 30rpx;
		height: 24rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.need-input>view:nth-child(1) text {
		font-size: 20rpx;
		color: #3575c9;
	}

	.need-input>view:nth-child(2) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #fff;
		width: 240rpx;
		height: 64rpx;
		background-image: linear-gradient(0deg,
			#4b8ce2 0%,
			#64bcfa 100%);
		border-radius: 31rpx;
		margin: 20rpx auto 0;
		text-align: center;
		line-height: 64rpx;
	}

	.scroll-devote-item {
		width: 100%;
		display: inline-block;
	}

	.devote-item {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.devote-item image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 100%;
		margin-right: 30rpx;
	}

	.devote-item>view:nth-child(2) {
		flex: 1;
		padding: 20rpx 0;
		border-bottom: solid 1rpx #efefef;
		display: flex;
		align-items: center;
	}

	.devote-item>view:nth-child(2)>view:nth-child(1) {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 64rpx;
	}

	.devote-item>view:nth-child(2)>view:nth-child(1)>text:nth-child(1) {
		font-size: 28rpx;
		color: #333333;
		max-width: 200rpx;
	}

	.devote-item>view:nth-child(2)>view:nth-child(1)>text:nth-child(2) {
		font-size: 24rpx;
		color: #999;
	}

	.devote-item>view:nth-child(2)>view:nth-child(2) {
		font-weight: bold;
		color: #3575c9;
		font-size: 28rpx;
		margin: 0 20rpx;
	}

	.devote-item>view:nth-child(2)>view:nth-child(3) {
		width: 82rpx;
		height: 32rpx;
		background-color: #ffc94a;
		border-radius: 4rpx;
		color: #333333;
		font-size: 20rpx;
		text-align: center;
		line-height: 32rpx;
	}

	.me-rank {
		position: absolute;
		top: 118rpx;
		left: -30rpx;
		width: 640rpx;
		height: 116rpx;
		background-color: #3575c9;
		border-radius: 10rpx 10rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		padding-right: 20rpx;
	}

	.me-rank>view:nth-child(1) {
		padding: 20rpx 10rpx;
		height: 116rpx;
		width: 135rpx;
		margin-right: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.me-rank>view:nth-child(1)>text:nth-child(1) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
	}

	.me-rank>view:nth-child(1)>text:nth-child(2) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #ffffff;
	}

	.me-rank>view:nth-child(2) {
		flex: 1;
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.me-rank>view:nth-child(2) image {
		width: 64rpx;
		height: 64rpx;
		box-shadow: 0 0 10rpx #fff;
		margin-right: 20rpx;
		border-radius: 100%;
	}

	.me-rank>view:nth-child(2)>view:nth-child(2) {
		height: 75rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.me-rank>view:nth-child(2)>view:nth-child(2)>text:nth-child(1) {
		font-size: 28rpx;
		color: #ffffff;
		max-width: 240rpx;
	}

	.me-rank>view:nth-child(2)>view:nth-child(2)>text:nth-child(2) {
		font-size: 24rpx;
		color: #ffffff;
	}

	.sj-left {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: 234rpx;
		left: -30rpx;
	}

	.sj-right {
		width: 20rpx;
		height: 20rpx;
		position: absolute;
		top: 234rpx;
		right: -30rpx;
		transform: rotate(-90deg);
	}

	.me-rank>view:nth-child(3) {
		font-size: 28rpx;
		color: #ffffff;
		font-weight: bold;
	}

	.rank-item {
		display: inline-block;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
	}

	.rank-item>view:nth-child(1) {
		height: 92rpx !important;
		width: 73rpx !important;
		margin-right: 30rpx;
		position: relative;

	}

	.rank-item .ten-before>image:nth-child(1) {
		width: 64rpx !important;
		height: 64rpx !important;
		border-radius: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}

	.rank-item .ten-before>image:nth-child(2) {
		width: 64rpx !important;
		height: 64rpx !important;
		position: absolute;
		top: 26rpx;
		left: 0;
	}

	.rank-item .ten-before text {
		display: none;
	}

	.rank-item .ten-after {
		display: flex;
		align-items: center;
	}

	.rank-item .ten-after text {
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		text-align: center;
		font-size: 20rpx;
		color: #fff;
		width: 62rpx;
		line-height: 34rpx;
		font-weight: bold;
	}

	.rank-item .ten-after>image:nth-child(1) {
		width: 64rpx;
		height: 64rpx;
		border-radius: 100%;
	}

	.rank-item .ten-after>image:nth-child(2) {
		width: 80rpx !important;
		height: 49rpx !important;
		position: absolute;
		top: 0;
		left: -10rpx;
		max-width: 80rpx;
	}

	.rank-item>view:nth-child(2) {
		flex: 1;
		padding: 30rpx 0;
		display: flex;
		border-bottom: solid 1rpx #efefef;
		align-items: center;
	}

	.rank-item>view:nth-child(2)>view:nth-child(1) {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.rank-item>view:nth-child(2)>view:nth-child(1)>view:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 250rpx;
	}

	.rank-item>view:nth-child(2)>view:nth-child(1)>view:nth-child(2) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #999999;
		margin-top: 15rpx
	}

	.rank-item>view:nth-child(2)>view:nth-child(1)>view:nth-child(2) text {
		color: #f34930;
	}

	.rank-item>view:nth-child(2)>view:nth-child(2) {
		font-size: 28rpx;
		color: #3575c9;
		font-weight: bold;

	}

	.click-suc-info {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.click-suc-info>view:nth-child(1) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		line-height: 36rpx;
		margin-top: 10rpx;
		font-weight: bold;

	}

	.click-suc-info>view:nth-child(2) {
		font-size: 48rpx;
		letter-spacing: 1rpx;
		color: #4b8ce2;
		font-weight: bold;
		line-height: 58rpx;
	}

	.click-suc-info>view:nth-child(3) {
		width: 240rpx;
		height: 64rpx;
		background-image: linear-gradient(0deg,
			#4b8ce2 0%,
			#64bcfa 100%);
		border-radius: 31rpx;
		color: #fff;
		text-align: center;
		line-height: 64rpx;
	}

	.click-suc-info>view:nth-child(4) {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		color: #999999;
	}

	.click-suc-info>view:nth-child(4) text {
		color: #4b8ce2;
	}

	.draw-content {
		width: 600rpx;
		height: 377rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
		position: relative;
		padding-top: 135rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
	}

	.draw-content image {
		width: 350rpx;
		height: 264rpx;
		position: absolute;
		top: -132rpx;
		left: 50%;
		transform: translateX(-175rpx);
	}

	.draw-content>view:nth-child(2) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		line-height: 36rpx;
		margin-top: 10rpx;
		font-weight: bold;
	}

	.draw-content>view:nth-child(3) {
		font-size: 48rpx;
		letter-spacing: 1rpx;
		color: #4b8ce2;
		font-weight: bold;
		line-height: 58rpx;
	}

	.draw-content>view:nth-child(4) {
		width: 100%;
		height: 88rpx;
		display: flex;
		align-items: center;
		border-top: solid 1rpx #efefef;
	}

	.draw-content>view:nth-child(4) text {
		flex: 1;
		text-align: center;
		line-height: 85rpx;
		color: #333333;
		font-size: 30rpx;
	}

	.draw-content>view:nth-child(4) text:nth-child(1) {
		border-right: solid 1rpx #efefef;
	}

	.goods-share-cont {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		z-index: 1027;
	}

	.share-img {
		display: block;
		overflow: hidden;
		width: 600rpx;
		height: 762rpx;
		border-radius: 8rpx;
	}

	.save-btn-g {
		width: 300rpx;
		height: 80rpx;
		border-radius: 8rpx;
		line-height: 80rpx;
		color: #fff;
		font-size: 30rpx;
		border-radius: 8rpx;
		text-align: center;
		background: #f34930;
		margin-top: 80rpx
	}

	canvas {
		position: absolute;
		top: -999999rpx;
		left: -999999rpx;
	}
</style>
<style>
	.tui-mtop {
		margin-top: 0 !important
	}

	.z_d_y {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.z_d_y .title {
		font-size: 32rpx;
		line-height: 60rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.z_d_y input {
		width: 520rpx;
		height: 88rpx;
		background-color: #efefef;
		border-radius: 8rpx;
		margin: 20rpx 0 30rpx;
		color: #333;
		font-size: 30rpx;
		padding: 20rpx;
		box-sizing: border-box;
		/* font-weight: bold; */
	}

	.z_d_y .place-holder {
		color: #999999;
	}

	.z_d_y .btn {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		border-top: solid 1rpx #efefef;
		align-items: center;
		box-sizing: border-box;
	}

	.z_d_y .btn text {
		flex: 1;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		font-size: 30rpx;
	}

	.z_d_y .btn text:nth-child(2) {
		color: #f34930;
		border-left: solid 1rpx #efefef;
		box-sizing: border-box;
	}
</style>
